<template>
  <div class="score_list">
    <!-- 标题 -->
    <div class="s_tit">
      <div class="s_tit_text">{{ scoreList.alias }}</div>
      <!-- <div class="s_tit_score" v-if="scoreList.score || scoreList.score === 0">{{ scoreList.score }}分</div> -->
    </div>
    <!-- 等次管理 -->
    <div class="grade">
      <div class="label">考核等次</div>
      <div class="grade_con">
        <div class="list" v-for="(item, index) in scoreList.optionEntityRequests" :key="index">
          <div
            :class="['btn', { active: item.optionId === scoreList.grade, disabled: disabled }]"
            @click="changeOrder(item, index)">
            {{ item.optionLabel }}
          </div>
          <div class="score_section">（{{ item.max }}-{{ item.min }}）</div>
        </div>
      </div>
      <div class="grade_score">
        <div class="score_con">
          <span class="s_label">评分</span>
          <!-- -number -->
          <el-input
            v-model="emitList.score"
            controls-position="right"
            size="small"
            :controls="false"
            @input="scoreChange"
            :min="min"
            :max="max"
            class="number_ipt"
            placeholder="请输入"
            :disabled="disabled"></el-input>
          <span>分</span>
        </div>
        <div class="reason_con" v-if="emitList.equal == '3' || emitList.reason">
          <span class="s_label">备注</span>
          <el-input
            v-model="emitList.reason"
            size="mini"
            placeholder="请输入较差的原因"
            class="reason_ipt"
            :disabled="disabled"
            @change="reasonChange"></el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import scoreData from './scoreData'

export default {
  name: 'ScoreList',
  components: {},
  props: {
    scoreList: {
      type: Object,
      default: () => {
        return {}
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 初始最大值
      max: 20,
      // 初始最小值
      min: 0,
      timer: '',
      emitList: {},
    }
  },
  computed: {},
  watch: {
    scoreList: {
      handler(news) {
        this.emitList = news
      },
    },
  },
  created() {
    this.emitList = this.scoreList
  },
  mounted() {
    this.max = this.scoreList.max
    this.min = this.scoreList.min
  },
  methods: {
    // 分数变化
    scoreChange(val) {
      const that = this
      if (that.timer) {
        clearTimeout(this.timer)
      }
      that.timer = setTimeout(function () {
        // 判断是否是数字
        if (Math.floor(val) !== val) {
          that.emitList.score = ''
          that.emitList.grade = ''
          that.emitList.equal = ''
          that.emitList.optionName = ''

          return that.$message({
            message: '评分只能输入整数',
            type: 'warning',
          })
        }
        // 大于最大值
        if (val > that.max) {
          that.emitList.score = that.max
          that.$alert('分值超出该项指标区间值，请重新输入', '提示', {
            confirmButtonText: '确定',
            callback: action => {},
          })
        }
        // 小于最小值
        if (val < that.min) {
          that.emitList.score = that.min
          that.$alert('分值超出该项指标区间值，请重新输入', '提示', {
            confirmButtonText: '确定',
            callback: action => {},
          })
        }
        // 判断区间
        for (let index = 0; index < that.emitList.optionEntityRequests.length; index++) {
          const el = that.emitList.optionEntityRequests[index]
          if (that.emitList.score >= el.min && that.emitList.score <= el.max) {
            that.emitList.grade = el.optionId
            that.emitList.equal = index
            that.emitList.optionName = el.optionLabel
            that.$emit('scoreChange')
            return
          }
        }
      }, 1000)
    },
    // 等次变化
    changeOrder(item, index) {
      if (this.disabled) return

      if (this.emitList.grade === item.optionId) {
        this.emitList.grade = ''
        this.emitList.score = ''
        this.emitList.equal = ''
        this.emitList.optionName = ''

        // this.max = this.emitList.max
        // this.min = this.emitList.min

        item.down = false
        item.optionScore = ''
      } else {
        this.emitList.grade = item.optionId
        this.emitList.score = item.max
        this.emitList.equal = index
        this.emitList.optionName = item.optionLabel

        // this.max = item.max
        // this.min = item.min

        item.down = true
        // item.optionScore = item.optionScore
      }

      if (index !== 3) {
        this.emitList.reason = ''
      }
      this.$emit('scoreChange')
    },
    reasonChange() {
      this.$emit('scoreChange')
    },
  },
}
</script>

<style lang="scss" scoped>
.score_list {
  padding: 0 10px;
  font-size: 14px;
  margin-bottom: 10px;
  .s_tit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    border-left: 3px solid #fe6b6e;
    padding-left: 10px;
    .s_tit_score {
      color: #e3c79f;
    }
  }
  .grade {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
    .label {
      width: 100px;
      font-size: 16px;
    }
    .grade_con {
      width: 400px;
      display: flex;
      margin: 0 10px;
      .list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &:not(:last-of-type) {
          margin-right: 10px;
        }
        .btn {
          width: 90px;
          height: 30px;
          line-height: 28px;
          font-size: 14px;
          text-align: center;
          border-radius: 4px;
          border: 1px solid #ccc;
          cursor: pointer;
          margin-bottom: 5px;
          color: #333;

          &.active {
            background-color: #e3c79f;
            color: #fff;
            border-color: #e3c79f;
          }
          &.disabled {
            cursor: not-allowed;
          }
        }
        .score_section {
          font-size: 14px;
        }
      }
    }
    .grade_score {
      flex: 1;
      width: calc(100% - 480px);
      .score_con,
      .reason_con {
        display: flex;
        align-items: center;
        font-size: 15px;
        .s_label {
          margin-right: 10px;
          width: 40px;
          font-size: 16px;
        }
        .number_ipt {
          margin-right: 5px;
          width: 100px;
        }
        .reason_ipt {
          flex: 1;
          width: 100px;
        }
        .number_ipt {
          font-size: 15px;
          /deep/.el-input {
            font-size: inherit !important;
          }
        }
      }
      .reason_con {
        margin-top: 5px;
      }
    }
  }
}
</style>
